<!--<template>-->
<!--  <div class="publish-article">-->
<!--    <el-form ref="form" :model="form" :rules="rules" style="margin:0 auto;">-->
<!--      <el-form-item  prop="title">-->
<!--        <input  style="position: relative; left: 0px;top: 15px;bottom: 0px; width: 600px;height:20.36px;float: left" v-model="form.title" placeholder="请输入文章标题">-->
<!--      </el-form-item>-->
<!--      <el-form-item  class="button">-->
<!--        <el-button style="width: 80.28px;height: 52px; position: absolute; top: -50px;line-height: 10px;text-align: center; right: 100px; float: right" type="primary" @click="handleSubmit">发布</el-button>-->
<!--        <div style="float: right; top: -45px; right: 10px; position: absolute">-->
<!--          <el-popover-->
<!--              v-show="user==null"-->
<!--              placement="top-start"-->
<!--              width="200"-->
<!--              trigger="hover">-->
<!--            <div slot="reference">-->
<!--              <el-avatar src=""></el-avatar>-->
<!--            </div>-->
<!--            <el-menu-->
<!--                default-active="2"-->
<!--                class="el-menu-vertical-demo">-->
<!--              <el-menu-item index="1-1">个人中心</el-menu-item>-->
<!--              <el-menu-item index="1-2">退出登录</el-menu-item>-->
<!--            </el-menu>-->
<!--          </el-popover>-->
<!--          <el-popover-->
<!--              v-show="user!=null"-->
<!--              placement="top-start"-->
<!--              width="200"-->
<!--              trigger="hover">-->
<!--            <div slot="reference" style="text-align: center">-->
<!--              <el-avatar fit="scale-down" size="medium" shape="circle"-->
<!--                         src="">-->
<!--              </el-avatar>-->
<!--            </div>-->
<!--            <el-menu-->
<!--                default-active="2"-->
<!--                class="el-menu-vertical-demo">-->
<!--              <el-menu-item index="1-1">登录</el-menu-item>-->
<!--              <el-menu-item index="1-2">注册</el-menu-item>-->
<!--            </el-menu>-->
<!--          </el-popover>-->
<!--        </div>-->
<!--       </el-form-item>-->
<!--      <el-form-item prop="content" >-->
<!--       <Editor style="position: absolute;width: 100%;height: 0px" />-->
<!--      </el-form-item>-->

<!--    </el-form>-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->

<!--import mavonEditor from 'mavon-editor';-->
<!--import 'mavon-editor/dist/css/index.css';-->
<!--import { Message } from 'element-ui';-->
<!--import axios from 'axios';-->
<!--import qs from 'qs';-->
<!--import Editor from '@/components/SendMessage.vue';-->
<!--import QuillEditor from "@/components/RichTestEditor.vue";-->
<!--export default {-->
<!--  name: 'PublishArticle',-->
<!--  components: {-->
<!--    QuillEditor,-->
<!--    Editor-->
<!--  },-->
<!--  data() {-->
<!--    return {-->
<!--      editorOption:{},-->

<!--      visible:false,-->
<!--      form: {-->
<!--        title: '',-->
<!--        category: '',-->
<!--        cover: '',-->
<!--        content: '',-->
<!--      },-->
<!--      uploadCoverApiUrl: '/api/article/cover',-->
<!--      uploadImgApiUrl: '/api/article/imag',-->
<!--      fileList:[],-->
<!--      rules:{-->

<!--        category:[-->
<!--          {required:true,message:'请输入文章分类', trigger: 'blur'}-->
<!--        ],-->
<!--        cover:[-->
<!--          {required:true,message:'请上传文章封面', trigger: 'blur'}-->
<!--        ],-->
<!--        content:[-->
<!--          {required:true,message:'请输入文章内容', trigger: 'blur'}-->
<!--        ]-->
<!--      }-->
<!--    };-->
<!--  },-->

<!--  methods: {-->
<!--    validate(){-->
<!--      let vm = this;-->
<!--      return new Promise((resolve,reject) => {-->
<!--        vm.$refs.form.validate(valid => {-->
<!--          if(valid){-->
<!--            resolve()-->
<!--          }else{-->
<!--            reject()-->
<!--          }-->
<!--        })-->
<!--      })-->
<!--    },-->
<!--    handleSubmit() {-->
<!--      let vm = this;-->

<!--      vm.validate()-->
<!--          .then(() => {-->
<!--            // 在这里写入发布文章的逻辑-->
<!--            const data = {-->
<!--              title: vm.form.title,-->
<!--              category: vm.form.category,-->
<!--              cover: vm.form.cover,-->
<!--              content: vm.form.content,-->
<!--            };-->
<!--            axios({-->
<!--              method: 'post',-->
<!--              url: '/api/article/add',-->
<!--              data: qs.stringify(data),-->
<!--            }).then(res => {-->
<!--              console.log(res.data);-->
<!--              Message({-->
<!--                type:'success',-->
<!--                message:'发布成功'-->
<!--              });-->
<!--            }).catch(err => {-->
<!--              console.log(err);-->
<!--              Message({-->
<!--                type:'error',-->
<!--                message:'发布失败'-->
<!--              });-->
<!--            })-->
<!--          })-->
<!--          .catch(() => {-->
<!--            Message({-->
<!--              type: "error",-->
<!--              message: "表单校验不通过，请检查输入项！",-->
<!--            });-->
<!--          });-->
<!--    },-->
<!--    handleCoverSuccess(response, file, fileList) {-->
<!--      this.form.cover = response.url;-->
<!--      this.fileList = fileList;-->
<!--    },-->
<!--    handleUploadImg(event, insert) {-->
<!--      const formData = new FormData();-->
<!--      formData.append('file', event.target.files[0]);-->
<!--      axios-->
<!--          .post(this.uploadImgApiUrl, formData, {-->
<!--            headers: {-->
<!--              'Content-Type': 'multipart/form-data',-->
<!--            },-->
<!--          })-->
<!--          .then(res => {-->
<!--            console.log(res);-->
<!--            insert(res.data.url);-->
<!--          })-->
<!--          // .continue(err => {-->
<!--          //   console.log(err);-->
<!--          //   Message({-->
<!--          //     type: ‘error’,-->
<!--          //   message: ‘上传图片失败，请重新上传’,-->
<!--          // });-->
<!--          // });-->
<!--    },-->
<!--    /*失去焦点事件*/-->
<!--    onEditorBlur(quill){-->
<!--      console.log(("editor blur",quill))-->
<!--    },-->
<!--    /*获取焦点事件*/-->
<!--    onEditorFocus(quill){-->
<!--      console.log(("editor focus",quill))-->
<!--    },-->
<!--    /*准备富文本编辑器*/-->
<!--    onEditorReady(quill){-->
<!--      console.log(("editor ready",quill))-->
<!--    },-->
<!--    /*内容改变时间*/-->
<!--    onEditorChange({quill,html,text}){-->
<!--      console.log("editor change!",quill,html,text);-->
<!--      this.c.content=html;-->
<!--    },-->
<!--    onInput(value) {-->
<!--      console.log(value)-->
<!--      this.c.content = value // 将编辑器内容存储到 content 变量-->
<!--      this.c.brief = value.substring(0, 50) // 将摘要存储为编辑器中前50个字符-->
<!--    },-->
<!--  },-->
<!--};-->
<!--</script>-->
<!--<style scoped>-->
<!--input{-->
<!--  font-size: 30px;-->
<!--  line-height: 68.36px;-->
<!--  height: 40px !important;-->
<!--  border: none;-->
<!--}-->
<!--input:focus{-->
<!-- outline: none;-->
<!--}-->
<!--</style>-->